<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画animation</title>
</head>
<style>
    .outer {
        width: 1000px;
        height: 200px;
        border: 1px solid #000;
    }

    .inner {
        width: 200px;
        height: 200px;
        background-color: mediumpurple;
        animation: donghua 3s 0.5s ease;
        /* 动画播放次数 */
        animation-iteration-count: infinite;
        /* 动画播放方向 */
        animation-direction: alternate;
        /* 动画停止后元素所在位置 */
        animation-fill-mode: backwards;

        /* 综合显示 */
        /* animation: donghua 3s 0.5s ease infinite alternate backwards  */
    }

    .outer:hover .inner {
        /* 动画播放状态 */
        animation-play-state: paused;
    }

    @keyframes donghua {
        0% {}

        50% {
            border-radius: 35%;
        }

        100% {
            border-radius: 100%;
            background-color: chocolate;
            transform: translate(800px) rotate(360deg);
        }
    }
</style>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>